<template>
	<view class="technician">
		<view class="" v-if="dataList.length !== 0">
				<view class="dataList" v-for="item in dataList">
					<view class="dataList_title flexjsbac">
						<text>{{item.title}}</text>
						<text :style="{'color':status[item1.status].color}">{{status[item1.status].title}}</text>
					</view>
					<view class="technicianList flex" v-for="item1 in item.technicianList" @click="clickItem(item)">
						<u-checkbox-group>
							<u-checkbox 
							    @change="checkboxChange($event,item1)"
								v-model="formData[item.key1]" 
								v-if="isChecked"
								size='circle'
							>
							</u-checkbox>
							</u-checkbox-group>
						<img src="/static/images/order/Rectangle.png" alt="">
						<view class="flex1">
							<view class="flexjsbac technicianName">
								<text>{{item1.name}}</text>
								<text v-if="moneyShow">￥{{item1.money}}</text>
							</view>
							<view class="flexjsbac list_con">
								<view class="flexJcac">
									<u-icon name="order" color="#666666" size="22"></u-icon>
									{{item1.fwxm}}
								</view>
								<text :style="{'color':status[item1.status].color}">{{status[item1.status].title}}</text>
							</view>
							<view class="flexjsbac">
								<view class="flexJcac">
									<u-icon name="clock" color="#666666" size="20"></u-icon>
									{{item1.yysj}}
								</view>
							</view>
							
						</view>
					</view>
					<view class="giveMoney" v-if="giveMoneyShow">
						实付款：<text style="color:#FF0000">$89.00</text>
					</view>
					<view class="bottom_con" v-if="slotName">
						<slot :name="slotName"></slot>
					</view>
				</view>
		</view>
		<view v-else>
			<Empty />
		</view>
	</view>
</template>

<script>
	import { log } from 'neo-async'
	import Empty from './empty.vue'
	export default{
		components:{ Empty },
		name:'Technician',
		props:{
			status:{
				type:Object,
				default:{
					0:{
						title:'待服务',
						color:'#C27E15'
					},
					1:{
						title:'部分待服务',
						color:'#C27E15'
					},
					2:{
						title:'服务中',
						color:'#FF0000'
					},
					3:{
						title:'待评价',
						color:'#FF0000'
					}
				}
			},
			slotName:{
				type:String,
				default:null
			},
			isChecked:{
				type:Boolean,
				default:false
			},
			moneyShow:{
				type:Boolean,
				default:false
			},
			giveMoneyShow:{
				type:Boolean,
				default:false
			},
			
		},
		data(){
			return{
				formData:[],
				addd:true,
				dataList:[
					{
						key:false,
						title:'理想中心店',
						status:0,
						technicianList:[
							{
								name:'08号何燕',
								fwxm:'颈肩按摩90分钟',
								yysj:'2023-04-07 13：20-14：20',
								status:0,
								money:249.00,
								id:1
							},
							{
								name:'08号何燕',
								fwxm:'颈肩按摩90分钟',
								yysj:'2023-04-07 13：20-14：20',
								status:0,
								money:249.00,
								id:2
							},
						]
					}
				]
			}
		},
		methods:{
			checkboxChange(e,item){
				if(e){
					this.formData.push(item)
				}else{
					let el = this.formData.find(itm => itm.id === item.id);
					if (el) this.formData.splice(this.formData.indexOf(el), 1);
				}
			},
			clickItem(item){
				uni.navigateTo({
					url:`/subPages/order/detail`
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.technician{
		margin: 30rpx;
		.dataList{
			margin-bottom: 30rpx;
			background: #fff;
			border-radius:17rpx;
			.bottom_con{
				// border-top: 1px solid #E6E6E6;
				height: 122rpx;
				padding: 24rpx;
			}
			.dataList_title{
				font-size: 32rpx;
				font-weight: 600;
				letter-spacing: 0rpx;
				line-height: 46.34rpx;
				color: #333333;
				text-align: left;
				vertical-align: top;
				border-bottom: 1px solid #E6E6E6;
				padding: 24rpx;


			}
			.giveMoney{
				display: flex;
				justify-content: flex-end;
				align-items: center;
				border-bottom:none;
				height: 57rpx;
				padding: 40rpx 24rpx;
			}
			.technicianList{
				padding: 24rpx;
				border-bottom: 1px solid #E6E6E6;
				.technicianName{
					font-size: 30rpx;
					font-weight: 600;
					letter-spacing: 0rpx;
					line-height: 43.44rpx;
					color: #333333;
					text-align: left;
					vertical-align: top;
				}
				
				.list_con{
					margin: 15rpx 0;
				}
				img{
					width: 128rpx;
					height: 128rpx;
					margin-right: 24rpx;
				}
			}
		}
	}
	
</style>